<template>
  <div>
    <van-nav-bar
      title="用户结算"
      left-arrow
      @click-left="onClickLeft"
      class="navBar"
    />
    <div class="content">
      <van-cell is-link >
        <template #title>
          <b>添加收货地址</b>
        </template>
      </van-cell>
      <baseLine></baseLine>
      <van-cell :value="goods.selectedValue" is-link class="sku">
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <img :src="goods.mainImage" width="41" height="41"/>
        </template>
        <template #right-icon>
          <b class="lh41">{{goods.goodsPrice * 0.01}}</b>
        </template>
      </van-cell>
      <baseLine></baseLine>
      <van-cell-group class="box">
        <van-cell value="包邮" >
          <template #title>
            <b>运费</b>
          </template>
        </van-cell>
        <van-cell value="无可用">
          <template #title>
            <b>优惠券</b>
          </template>
        </van-cell>
      </van-cell-group>
      <baseLine></baseLine>
      <div class="fs12 pricebox">
        <p class="mb5">
          <b>商品价格：</b> 939.00
        </p>
        <p>
          <b>配送费用：</b> 0.00
        </p>
      </div>
      <baseLine></baseLine>
    </div>
    <van-submit-bar :price="goods.goodsPrice" button-text="去付款" @submit="onSubmit" />
  </div>
</template>

<script>
import baseLine from './../components/base/base-line.vue'
import axios from 'axios'
export default {
  data () {
    return {
      goods: {},
      status: 0
    }
  },
  components: {
    baseLine
  },
  methods: {
    onSubmit () {
      this.$dialog.confirm({
        title: '付钱吗 ？？？',
      })
        .then(() => {
          // 点击确定，生成一个已支付的订单
          this.status = 1
          this.createOrder()
        })
        .catch(() => {
          // 点击取消  生成一个待支付的订单
          this.status = 0
          this.createOrder()
        });
    },
    createOrder () {
      axios.post('/api/createOrder', {
        orderData: {
          userId: localStorage.getItem('userId'),
          selectedSku: JSON.parse(localStorage.getItem('orderData')),
          status: this.status
        }
      }).then(() => {
          this.$router.push('/orderList')
      })
    },
    onClickLeft () {
      this.$router.back()
    }
  },
  mounted () {
    let goodsData = JSON.parse(localStorage.getItem('goodsData'))
    this.goods = goodsData
  }
}
</script>

<!-- 这段样式用less语言 -->
<!-- >>> 原生css使用 -->
<!-- /deep/ less 使用 -->
<style>
  .sku .van-cell__value{
   flex: 4;
   font-size: 12px;
   line-height: 41px;
   text-align: left;
   color: #3c3c3c;
  }
 </style>
<style lang="less" scoped>
  .navBar {
    /deep/
    .van-nav-bar__content{
      background: #f2f2f2;
      color: #666;
    }
  }
  .content{
    padding-top: 10px;
    background: url(./../assets/bg1.png) repeat-x;
    background-size:  30px 5px;
    .lh41{
      line-height: 41px;
      color: #3c3c3c;
      font-size: 12px;
    }
    .box{
      .van-cell{
        font-size: 12px;
      }
    }
    .pricebox{
      margin: 10px 16px;
    }
  }

</style>